﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="slideshow.aspx.cs" Inherits="CNDM.slideshow" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <!-- Stylesheets -->
    <link rel="stylesheet" type="text/css" href="/styles/style.css" />
    <link rel="stylesheet" type="text/css" href="/styles/presentationCycle.css" />
    <!-- Scripts -->
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
    <script type='text/javascript' src='/scripts/jquery.cycle.all.min.js'></script>
    <script type='text/javascript' src='/scripts/presentationCycle.js'></script>
    <style type="text/css">
        .nav, .nav a, .nav ul, .nav li, .nav div, .nav form, .nav input
        {
            margin: 0;
            padding: 0;
            border: none;
            outline: none;
        }
        
        .nav a
        {
            text-decoration: none;
        }
        
        .nav li
        {
            list-style: none;
        }
        
        .nav
        {
            display: inline-block;
            position: relative;
            cursor: default;
            z-index: 500;
        }
        
        .nav > li
        {
            display: block;
            float: left;
        }
        
        .nav > li > a
        {
            position: relative;
            display: block;
            z-index: 510;
            height: 54px;
            padding: 0 20px;
            line-height: 54px;
            font-family: Helvetica, Arial, sans-serif;
            font-weight: bold;
            font-size: 13px;
            color: #fcfcfc;
            text-shadow: 0 0 1px rgba(0,0,0,.35);
            background: #372f2b;
            border-left: 1px solid #4b4441;
            border-right: 1px solid #312a27;
            -webkit-transition: all .3s ease;
            -moz-transition: all .3s ease;
            -o-transition: all .3s ease;
            -ms-transition: all .3s ease;
            transition: all .3s ease;
        }
        
        .nav > li:hover > a
        {
            background: #4b4441;
        }
        
        .nav > li:first-child > a
        {
            border-radius: 3px 0 0 3px;
            border-left: none;
        }
        .nav > li.nav-search > form
        {
            position: relative;
            width: inherit;
            height: 54px;
            z-index: 510;
            border-left: 1px solid #4b4441;
        }
        
        .nav > li.nav-search input[type="text"]
        {
            display: block;
            float: left;
            width: 1px;
            height: 24px;
            padding: 15px 0;
            line-height: 24px;
            font-family: Helvetica, Arial, sans-serif;
            font-weight: bold;
            font-size: 13px;
            color: #999999;
            text-shadow: 0 0 1px rgba(0,0,0,.35);
            background: #372f2b;
            -webkit-transition: all .3s ease 1s;
            -moz-transition: all .3s ease 1s;
            -o-transition: all .3s ease 1s;
            -ms-transition: all .3s ease 1s;
            transition: all .3s ease 1s;
        }
        
        .nav > li.nav-search input[type="text"]:focus
        {
            color: #fcfcfc;
        }
        
        .nav > li.nav-search input[type="text"]:focus, .nav > li.nav-search:hover input[type="text"]
        {
            width: 110px;
            padding: 15px 20px;
            -webkit-transition: all .3s ease .1s;
            -moz-transition: all .3s ease .1s;
            -o-transition: all .3s ease .1s;
            -ms-transition: all .3s ease .1s;
            transition: all .3s ease .1s;
        }
        
        .nav > li.nav-search input[type="submit"]
        {
            display: block;
            float: left;
            width: 20px;
            height: 54px;
            padding: 0 25px;
            cursor: pointer;
            background: #372f2b url(../img/search-icon.png) no-repeat center center;
            border-radius: 0 3px 3px 0;
            -webkit-transition: all .3s ease;
            -moz-transition: all .3s ease;
            -o-transition: all .3s ease;
            -ms-transition: all .3s ease;
            transition: all .3s ease;
        }
        
        .nav > li.nav-search input[type="submit"]:hover
        {
            background-color: #4b4441;
        }
        .nav > li > div
        {
            position: absolute;
            display: block;
            width: 100%;
            top: 50px;
            left: 0;
            opacity: 0;
            visibility: hidden;
            overflow: hidden;
            background: #ffffff;
            border-radius: 0 0 3px 3px;
            -webkit-transition: all .3s ease .15s;
            -moz-transition: all .3s ease .15s;
            -o-transition: all .3s ease .15s;
            -ms-transition: all .3s ease .15s;
            transition: all .3s ease .15s;
        }
        .nav > li:hover > div
        {
            opacity: 1;
            visibility: visible;
            overflow: visible;
        }
        .nav .nav-column {
    float: left;
    width: 20%;
    padding: 2.5%;
}
 
.nav .nav-column h3 {
    margin: 20px 0 10px 0;
    line-height: 18px;
 
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 14px;
    color: #372f2b;
    text-transform: uppercase;
}
 
.nav .nav-column h3.orange { color: #ff722b; }
 
.nav .nav-column li a {
    display: block;
    line-height: 26px;
 
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 13px;
    color: #888888;
}
 
.nav .nav-column li a:hover { color: #666666; }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <ul class="nav">
		<li>
			<a href="#">What's new</a>
			<div>
				<div class="nav-column">
					<h3>Home</h3>
					<ul>
						<li><a href="#">Pampers Diapers</a></li>
						<li><a href="#">Huggies Diapers</a></li>
						<li><a href="#">Seventh Generation</a></li>
						<li><a href="#">Diapers</a></li>
						<li><a href="#">Derbies</a></li>
						<li><a href="#">Driving shoes</a></li>
						<li><a href="#">Espadrilles</a></li>
						<li><a href="#">Loafers</a></li>
					</ul>
				</div>

				<div class="nav-column">
					<h3>Home</h3>
					<ul>
						<li><a href="#">Driving shoes</a></li>
						<li><a href="#">Espadrilles</a></li>
						<li><a href="#">Loafers</a></li>
					</ul>

					<h3>Home</h3>
					<ul>
						<li><a href="#">Driving shoes</a></li>
						<li><a href="#">Espadrilles</a></li>
						<li><a href="#">Loafers</a></li>
					</ul>
				</div>

				<div class="nav-column">
					<h3>Home</h3>
					<ul>
						<li><a href="#">Pampers Diapers</a></li>
						<li><a href="#">Huggies Diapers</a></li>
						<li><a href="#">Seventh Generation</a></li>
						<li><a href="#">Diapers</a></li>
						<li><a href="#">Derbies</a></li>
						<li><a href="#">Driving shoes</a></li>
						<li><a href="#">Espadrilles</a></li>
						<li><a href="#">Loafers</a></li>
					</ul>
				</div>

				<div class="nav-column">
					<h3 class="orange">Related Categories</h3>
					<ul>
						<li><a href="#">Pampers Diapers</a></li>
						<li><a href="#">Huggies Diapers</a></li>
						<li><a href="#">Diapers</a></li>
					</ul>

					<h3 class="orange">Brands</h3>
					<ul>
						<li><a href="#">Driving shoes</a></li>
						<li><a href="#">Espadrilles</a></li>
					</ul>
				</div>
			</div>
		</li>
		<li><a href="#">Top rated</a></li>
		<li>
			<a href="#">Earnings</a>
			<div>
				<div class="nav-column">
					<h3 class="orange">Related Categories</h3>
					<ul>
						<li><a href="#">Pampers Diapers</a></li>
						<li><a href="#">Huggies Diapers</a></li>
						<li><a href="#">Diapers</a></li>
					</ul>

					<h3 class="orange">Brands</h3>
					<ul>
						<li><a href="#">Driving shoes</a></li>
						<li><a href="#">Espadrilles</a></li>
					</ul>
				</div>

				<div class="nav-column">
					<h3>Home</h3>
					<ul>
						<li><a href="#">Pampers Diapers</a></li>
						<li><a href="#">Huggies Diapers</a></li>
						<li><a href="#">Seventh Generation</a></li>
						<li><a href="#">Diapers</a></li>
						<li><a href="#">Derbies</a></li>
						<li><a href="#">Driving shoes</a></li>
						<li><a href="#">Espadrilles</a></li>
						<li><a href="#">Loafers</a></li>
					</ul>
				</div>

				<div class="nav-column">
					<h3>Home</h3>
					<ul>
						<li><a href="#">Driving shoes</a></li>
						<li><a href="#">Espadrilles</a></li>
						<li><a href="#">Loafers</a></li>
					</ul>

					<h3>Home</h3>
					<ul>
						<li><a href="#">Driving shoes</a></li>
						<li><a href="#">Espadrilles</a></li>
						<li><a href="#">Loafers</a></li>
					</ul>
				</div>

				<div class="nav-column">
					<h3>Home</h3>
					<ul>
						<li><a href="#">Pampers Diapers</a></li>
						<li><a href="#">Huggies Diapers</a></li>
						<li><a href="#">Seventh Generation</a></li>
						<li><a href="#">Diapers</a></li>
						<li><a href="#">Derbies</a></li>
						<li><a href="#">Driving shoes</a></li>
						<li><a href="#">Espadrilles</a></li>
						<li><a href="#">Loafers</a></li>
					</ul>
				</div>
			</div>
		</li>
		<li><a href="#">Rings</a></li>
		<li><a href="#">Bracelets</a></li>
		<li><a href="#">All Categories</a></li>
		<li class="nav-search">
			<form action="#">
				<input type="text" placeholder="Search...">
				<input type="submit" value="">
			</form>
		</li>
	</ul>
    <h1>
        Presentation Cycle Example</h1>
    <div id="presentation_container" class="pc_container">
        <div class="pc_item">
            <div class="desc">
                <h1>
                    Server Park</h1>
                Consectetur adipiscing elit. Nunc quis tellus eros. Nam blandit diam id turpis bibendum
                nec rutrum dui pulvinar. Quisque fermentum, dolor ut adipiscing suscipit, leo lorem
                malesuada mauris, vitae dapibus mi ligula ut nunc.
            </div>
            <img src="images/slide1.jpg" alt="slide1" />
        </div>
        <div class="pc_item">
            <div class="desc">
                <h1>
                    iPhone Apps</h1>
                Consectetur adipiscing elit. Nunc quis tellus eros. Nam blandit diam id turpis bibendum
                nec rutrum dui pulvinar. Quisque fermentum, dolor ut adipiscing suscipit, leo lorem
                malesuada mauris, vitae dapibus mi ligula ut nunc.
            </div>
            <img src="images/slide2.jpg" alt="slide2" />
        </div>
        <div class="pc_item">
            <div class="desc" style="left: 0px;">
                <h1>
                    Wordpress Extensions</h1>
                Consectetur adipiscing elit. Nunc quis tellus eros. Nam blandit diam id turpis bibendum
                nec rutrum dui pulvinar. Quisque fermentum, dolor ut adipiscing suscipit, leo lorem
                malesuada mauris, vitae dapibus mi ligula ut nunc.
            </div>
            <img src="images/slide3.jpg" alt="slide3" />
        </div>
        <div class="pc_item">
            <div class="desc" style="left: 165px;">
                <h1>
                    City Skyline</h1>
                Consectetur adipiscing elit. Nunc quis tellus eros. Nam blandit diam id turpis bibendum
                nec rutrum dui pulvinar. Quisque fermentum, dolor ut adipiscing suscipit, leo lorem
                malesuada mauris, vitae dapibus mi ligula ut nunc.
            </div>
            <img src="images/slide4.jpg" alt="slide4" />
        </div>
        <div class="pc_item">
            <div class="desc">
                <h1>
                    Mario Finds Peach</h1>
                Consectetur adipiscing elit. Nunc quis tellus eros. Nam blandit diam id turpis bibendum
                nec rutrum dui pulvinar. Quisque fermentum, dolor ut adipiscing suscipit, leo lorem
                malesuada mauris, vitae dapibus mi ligula ut nunc.
            </div>
            <img src="images/slide5.jpg" alt="slide5" />
        </div>
        <div class="pc_item">
            <div class="desc">
                <h1>
                    Said and Done</h1>
                Consectetur adipiscing elit. Nunc quis tellus eros. Nam blandit diam id turpis bibendum
                nec rutrum dui pulvinar. Quisque fermentum, dolor ut adipiscing suscipit, leo lorem
                malesuada mauris, vitae dapibus mi ligula ut nunc.
            </div>
            <img src="images/slide6.jpg" alt="slide6" />
        </div>
    </div>
    <script type="text/javascript">
        presentationCycle.init();
    </script>
    </form>
</body>
</html>
